<template>
  <div class="content" ref="content">
    <van-sticky>
      <div class="header">
        <van-row class="header-row">
          <van-col span="8" class="col-1">
            <van-icon name="wap-home-o" class="icon" /></van-col>
          <van-col span="8" class="col-2">
            <div class="title">值得买</div>
          </van-col>
          <van-col span="8" class="col-3">
            <van-icon name="search" class="icon search" />
            <van-icon name="shopping-cart-o" class="icon" />
          </van-col>
        </van-row>
      </div>
    </van-sticky>

    <!-- 轮播图容器 -->
    <div class="swiper-container">
      <!-- 背景 -->
      <van-row>
        <van-col span="24">
          <div class="swiper-title">
            <div class="title">
              <img lazy-load src="../../assets/warthBuy/title.png" class="zdm">
              <span class="text">严选好物,用心生活</span>
            </div>
            <img lazy-load src="../../assets/warthBuy/swiperBg.jpg" class="bg">
          </div>
        </van-col>
      </van-row>
      <!-- 轮播 -->
      <div class="swiper-card">
        <van-swipe class="my-swipe" width="88" :loop="false">
          <van-swipe-item v-for="(column, index) in swiperDataList" :key="index">
            <div class="item" v-for="item in column" :key="item.id">
              <img :src="item.picUrl" style="width:60px;height:60px;">
              <div class="title">{{ item.mainTitle }}</div>
              <div class="desc">{{ item.viceTitle }}</div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 瀑布流 -->
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getLookList">
      <div class="look-list" transition-duration="0.3s" gutter="15" v-masonry item-selector=".look-item">
        <div v-masonry-tile class="look-item" v-for="item in lookColumn" :key="item.topicId">
          <div class="innerWrapper">
            <img :src="item.picUrl" class="picUrl" />
            <div class="text">{{ item.title }}</div>
            <div class="info">
              <div class="user">
                <img v-lazy="item.avatar" alt="" class="avatar">
                <div class="nickName">{{ item.nickname }}</div>
              </div>
              <div class="playVolume">
                <div><van-icon name="eye-o" class="eye" /></div>
                <div>{{ formatNumber(item.readCount) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { reqLookListData, reqSwiperData } from "../../api/worthBuy"
import formatNumber from './formatNumber'
import { defineComponent, nextTick, getCurrentInstance } from 'vue';

// 轮播图数据
const swiperDataList = ref<any>([])
// 瀑布流数据
const lookColumn = ref<any>([])
const current = ref(1)

const loading = ref(false);
const finished = ref(false);

const instance: any = getCurrentInstance();
const _this: any = instance.appContext.config.globalProperties;



// 请求轮播图数据的方法
const getSwiperData = async () => {
  const res = await reqSwiperData()
  const arr: any = saveArray(res.data.navList)
  swiperDataList.value = arr
}
// 请求瀑布流数据的方法
const getLookList = async () => {
  const res = await reqLookListData(current.value)
  lookColumn.value = lookColumn.value.concat(res.data.result[0].topics)
  // 加载状态结束
  loading.value = false;
  nextTick(() => {
    _this.$redrawVueMasonry('containerId');
  })
  current.value = current.value + 1
}

const saveArray = (array: any) => {
  let index = 0
  let newArray = <any>[];
  let navArray = <any>[]
  while (index < array.length) {
    newArray.push(array.slice(index, index += array.length / 2));
  }
  for (let i = 0;i < newArray[0].length;i++) {
    navArray.push([newArray[0][i], newArray[1][i]]);
  }
  return navArray
}

// 页面挂载完成后获取轮播图数据
onMounted(() => {
  getSwiperData()
  getLookList()
})

</script>

<style scoped lang="less">
.content {
  background-color: #eee;
  width: 100%;
  box-sizing: border-box;

  .header {
    width: 375px;
    height: 50px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 12px;

    .header-row {
      width: 100%;

      .van-col {
        text-align: center;
        font-size: 24px;

        .title {
          font-size: 18px;
        }
      }

      .col-1 {
        text-align: left;
      }

      .col-3 {
        text-align: right;

        .search {
          margin-right: 15px;
        }
      }
    }
  }

  .swiper-container {
    position: relative;

    .swiper-title {
      width: 100%;

      .bg {
        height: 259px;
      }

      .title {
        position: absolute;
        display: flex;
        top: 35px;
        left: 10px;

        .zdm {
          width: 65px;
          height: 34.5px;
          display: block;
        }

        .text {
          font-size: 15px;
          font-weight: 700;
          color: #ffffff;
          line-height: 40px;
        }
      }


    }

    .swiper-card {
      width: 355px;
      height: 270px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      margin-top: -185px;

      .my-swipe {
        height: 100%;

        .van-swipe-item {
          height: 100%;
          box-sizing: border-box;
          padding-top: 18px;

          .item {

            text-align: center;

            .title {
              font-size: 14px;
              font-weight: 700;
            }

            .desc {
              font-size: 12px;
              color: #999999;
            }
          }

          .item:nth-child(even) {
            margin-top: 15px;
          }
        }

        :deep(.van-swipe__indicator) {
          background-color: #999999;
          width: 20px;
          border-radius: 0;
          height: 2px;
          margin-right: 0;
        }

        :deep(.van-swipe__indicator--active) {
          background-color: #dd1a21;
        }

        :deep(.van-swipe__indicator:nth-child(5)) {
          display: none;
        }

        :deep(.van-swipe__indicator:nth-child(6)) {
          display: none;
        }

        :deep(.van-swipe__indicator:nth-child(7)) {
          display: none;
        }
      }
    }
  }

  .look-list {
    padding: 15px 10px 0;
    box-sizing: border-box;

    .look-item {
      width: 45%;
      overflow: hidden;

      .innerWrapper {
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 10px;
        overflow: hidden;

        .picUrl {
          width: 100%;
        }
      }

      .text {
        padding: 9px 8px 0;
        font-size: 14px;
        color: #7f7f7f;
      }

      .info {
        padding: 8.5px 8px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .user {
          display: flex;
          align-items: center;

          .avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 4px;
          }
        }

        .playVolume {
          display: flex;
          align-items: center;

          .eye {
            font-size: 16px;
          }
        }
      }
    }

  }

}
</style>